<template>
  <div class="container">
    <!-- header -->
    <slot name="header">
      <el-row
        :gutter="20"
        class="table-header"
        justify="space-between"
      >
        <!-- 添加 -->
        <el-col
          :span="18"
          class="add-item"
        >
          <span class="block"></span>
          <slot
            name="addItem"
            v-if="hasRight('Add')"
          >
            <el-button
              @click="addItem"
              icon="el-icon-plus"
              size="mini"
            >{{ $language.local("添加") }}</el-button>
            <el-dialog
              :title="$language.local('添加')"
              :visible.sync="addDialogVisible"
              width="40%"
            >
              <el-form
                :model="addForm"
                :rules="$rules"
                label-width="100px"
                ref="addFormRef"
                status-icon
              >
                <template v-for="(value, key) in addForm">
                  <template
                    v-if="
                      key.toLowerCase().indexOf('date') !== -1 ||
                      key.toLowerCase().indexOf('time') !== -1 ||
                      key.toLowerCase().indexOf('id') !== -1 ||
                      key.toLowerCase().indexOf('status') !== -1
                    "
                  ></template>
                  <el-form-item
                    :key="key"
                    :label="$language.local(key)"
                    :prop="key"
                    v-else-if="key.toLowerCase() === 'name'"
                  >
                    <xy-input
                      clearable
                      placeholder="请输入"
                      prefix-icon="el-icon-user"
                      v-model="addForm.name"
                    ></xy-input>
                  </el-form-item>
                  <el-form-item
                    :key="key"
                    :label="$language.local(key)"
                    :prop="key"
                    v-else-if="key.toLowerCase() === 'password'"
                  >
                    <xy-input
                      clearable
                      placeholder="请输入密码"
                      prefix-icon="el-icon-lock"
                      show-password
                      v-model="addForm[key]"
                    ></xy-input>
                  </el-form-item>

                  <el-form-item
                    :key="key"
                    :label="$language.local(key)"
                    :prop="key"
                    v-else
                  >
                    <xy-input
                      clearable
                      v-model="addForm[key]"
                    ></xy-input>
                  </el-form-item>
                </template>
              </el-form>
              <span
                class="dialog-footer"
                slot="footer"
              >
                <el-button @click="addDialogVisible = false">
                  {{
                  $language.local("取消")
                  }}
                </el-button>
                <el-button
                  @click="add('addFormRef')"
                  type="primary"
                >
                  {{
                  $language.local("确定")
                  }}
                </el-button>
              </span>
            </el-dialog>
          </slot>
          <slot name="query"></slot>
        </el-col>
        <!-- 搜索 -->
        <el-col
          :span="6"
          class="row jcfe table-search"
        >
          <el-autocomplete
            :fetch-suggestions="querySearch"
            :placeholder="$language.local('请输入') + $language.local(queryKey)"
            :trigger-on-focus="false"
            @clear="onClearProc"
            @input="onInput"
            @select="handleSelect"
            class="inline-input"
            clearable
            size="mini"
            v-model="searchInput"
          >
            <!-- <el-select
              size="small"
              v-model="queryAttribute"
              slot="prepend"
              placeholder="请选择"
              @change="queryAttributeChange"
            >
              <el-option
                v-for="(item, key) in columns"
                :key="key"
                :label="$language.local(key)"
                :value="key"
              >
              </el-option>
            </el-select>-->

            <el-button
              @click="onSearch"
              icon="el-icon-search"
              slot="append"
            ></el-button>
          </el-autocomplete>
        </el-col>
      </el-row>
      <slot name="cards"></slot>
    </slot>
    <!--#region 表格数据 -->
    <div class="xy-table">
      <el-table
        :data="dataList"
        :size="size"
        @selection-change="handleSelectionChange"
        border
        class="el-table"
        height="100%"
        id="data"
        ref="multipleTable"
        stripe
      >
        <slot name="selection">
          <el-table-column
            align="center"
            type="selection"
            v-if="multiple"
          ></el-table-column>
        </slot>

        <template v-for="(value, key) in columnKeys">
          <!-- #region 忽略项 -->
          <template v-if="/RechargeTime|SettlementDate/i.test(key)"></template>
          <!-- #endregion -->
          <!-- #region 客户忽略项 -->
          <template v-else-if="/customerName|MerchantName|ServiceName/i.test(key)">
            <template v-if="user.roletype == 3"></template>
            <el-table-column
              :key="key"
              :label="$language.local(key)"
              :prop="key"
              align="center"
              show-overflow-tooltip
              v-else
            ></el-table-column>
          </template>
          <!-- #endregion -->

          <!-- #region role_type -->
          <template v-else-if="key === 'role_type'">
            <el-table-column
              :key="key"
              :label="$language.local(key)"
              :prop="key"
              align="center"
            ></el-table-column>
          </template>
          <!-- #endregion -->

          <!-- #region 状态Status -->
          <template v-else-if="key.toLowerCase().indexOf('status') != -1">
            <!-- #region 状态 RechargeStatus -->
            <el-table-column
              :key="key"
              :label="$language.local('充值状态')"
              :prop="key"
              align="center"
              v-if="key == 'RechargeStatus'"
            >
              <template slot-scope="scope">
                <div v-if="scope.row[key] == 3">
                  <!-- <i class="el-icon-circle-check green"></i> -->
                  <span class="badge-dot success"></span>

                  <span v-if="scope.row.RechargeStatusName">
                    {{
                    $language.local(scope.row.RechargeStatusName)
                    }}
                  </span>
                  <span v-else>{{ $language.local("已审核") }}</span>
                </div>
                <div v-else>
                  <!-- <i class="el-icon-circle-close red"></i> -->
                  <span class="badge-dot warning"></span>

                  <span v-if="scope.row.RechargeStatusName">
                    {{
                    $language.local(scope.row.RechargeStatusName)
                    }}
                  </span>
                  <span v-else>{{ $language.local("待审核") }}</span>
                </div>
                <!-- <div v-if="'Indate' in scope.row">
                  <span>{{ converDate(scope.row.Indate) }}</span>
                </div>-->
              </template>
            </el-table-column>
            <!-- #endregion -->
            <!-- #region 状态 BatchStatus -->
            <el-table-column
              :key="key"
              :label="$language.local('批次状态')"
              :prop="key"
              align="center"
              v-else-if="key == 'BatchStatus'"
            >
              <template slot-scope="scope">
                <div v-if="scope.row[key] == 6">
                  <!-- <i class="el-icon-circle-check green"></i> -->
                  <span class="badge-dot success"></span>

                  <span v-if="scope.row.BatchStatusName">
                    {{
                    $language.local(scope.row.BatchStatusName)
                    }}
                  </span>
                  <span v-else>{{ $language.local("已审核") }}</span>
                </div>
                <div v-else>
                  <!-- <i class="el-icon-circle-close red"></i> -->
                  <span class="badge-dot warning"></span>

                  <span v-if="scope.row.BatchStatusName">
                    {{
                    $language.local(scope.row.BatchStatusName)
                    }}
                  </span>
                  <span v-else>{{ $language.local("待审核") }}</span>
                </div>
                <!-- <div v-if="'Indate' in scope.row">
                  <span>{{ converDate(scope.row.Indate) }}</span>
                </div>
                <div v-else-if="'CheckTime' in scope.row">
                  <span>{{ converDate(scope.row.CheckTime) }}</span>
                </div>-->
              </template>
            </el-table-column>
            <!-- #endregion -->
            <!-- #region 状态 RechargeStatus -->
            <el-table-column
              :key="key"
              :label="$language.local(key)"
              :prop="key"
              align="left"
              v-else-if="key == 'BusinesStatus'"
            >
              <template slot-scope="scope">
                <div v-if="scope.row[key] == '2'">
                  <!-- <i class="el-icon-circle-check green"></i> -->
                  <span class="badge-dot success"></span>

                  <span v-if="scope.row.BusinesStatusName">
                    {{
                    $language.local(scope.row.BusinesStatusName)
                    }}
                  </span>
                  <span v-else>{{ $language.local("已审核") }}</span>
                </div>
                <div v-else>
                  <!-- <i class="el-icon-circle-close red"></i> -->
                  <span class="badge-dot warning"></span>

                  <span v-if="scope.row.BusinesStatusName">
                    {{
                    $language.local(scope.row.BusinesStatusName)
                    }}
                  </span>
                  <span v-else>{{ $language.local("待审核") }}</span>
                </div>
                <!-- <div v-if="'Indate' in scope.row">
                  <span>{{ converDate(scope.row.Indate) }}</span>
                </div>
                <div v-else-if="'CheckTime' in scope.row">
                  <span>{{ converDate(scope.row.CheckTime) }}</span>
                </div>-->
              </template>
            </el-table-column>
            <!-- #endregion -->
            <!-- #region  任务状态TskStatus-->
            <el-table-column
              :key="key"
              :label="$language.local(key)"
              :prop="key"
              align="center"
              v-else-if="key === 'TskStatus'"
            >
              <template slot-scope="scope">
                <template v-if="scope.row.TskStatus < 5">
                  <span class="badge-dot-warning"></span>
                </template>
                <template v-else>
                  <span class="badge-dot success"></span>
                </template>
                {{ $common.dictionary.get(key, scope.row[key]) }}
                <!-- <template
                  v-if="'Ctime' in scope.row"
                >
                  <div>{{ converDate(scope.row.Ctime) }}</div>
                </template>-->
              </template>
            </el-table-column>
            <!-- #endregion -->

            <!-- #region 状态 PayStatusName -->
            <el-table-column
              :key="key"
              :label="$language.local(key)"
              :prop="key"
              align="left"
              v-else-if="key == 'PayStatusName'"
            >
              <template slot-scope="scope">
                <div v-if="scope.row[key] == '成功'">
                  <!-- <i class="el-icon-circle-check green"></i> -->
                  <span class="badge-dot success"></span>

                  <span>{{ $language.local(scope.row.PayStatusName) }}</span>
                </div>
                <div v-else>
                  <!-- <i class="el-icon-circle-close red"></i> -->
                  <span class="badge-dot danger"></span>

                  <span v-if="scope.row.PayStatusName">
                    {{
                    $language.local(scope.row.PayStatusName)
                    }}
                  </span>
                  <span v-else>{{ $language.local("失败") }}</span>
                </div>
                <!-- <div v-if="'atime' in scope.row">
                  <span>{{ converDate(scope.row.atime) }}</span>
                </div>-->
              </template>
            </el-table-column>
            <!-- #endregion -->
            <!-- #region 状态 InvoiceBusinessStatus -->
            <el-table-column
              :key="key"
              :label="$language.local(key)"
              :prop="key"
              align="center"
              v-else-if="key === 'InvoiceBusinessStatus'"
            >
              <template slot-scope="scope">
                <div v-if="scope.row[key] == 3">
                  <span class="badge-dot success"></span>

                  <span v-if="`InvoiceBusinessStatusName` in scope.row">
                    {{
                    $language.local(scope.row.InvoiceBusinessStatusName)
                    }}
                  </span>
                </div>
                <div v-else>
                  <!-- <i class="el-icon-circle-close red"></i> -->

                  <span
                    class="badge-dot warning"
                    v-if="scope.row.InvoiceBusinessStatusName"
                  >
                    {{
                    $language.local(scope.row.InvoiceBusinessStatusName)
                    }}
                  </span>
                  <span
                    class="badge-dot warning"
                    v-else
                  >
                    {{
                    $language.local("待审核")
                    }}
                  </span>
                </div>
                <!-- <div v-if="'Indate' in scope.row">
                  <span>{{ converDate(scope.row.Indate) }}</span>
                </div>-->
              </template>
            </el-table-column>
            <!-- #endregion -->
            <!-- #region 状态 OpenInvoiceStatus -->
            <el-table-column
              :key="key"
              :label="$language.local(key)"
              :prop="key"
              align="center"
              v-else-if="key === 'OpenInvoiceStatus'"
            >
              <template slot-scope="scope">
                <span
                  class="badge-dot success"
                  v-if="scope.row[key] === 1"
                ></span>
                <span
                  class="badge-dot warning"
                  v-else
                ></span>
                {{
                $common.dictionary.get(key,scope.row[key])
                }}
                <!-- <div v-if="'Indate' in scope.row">
                  <span>{{ converDate(scope.row.Indate) }}</span>
                </div>-->
              </template>
            </el-table-column>
            <!-- #endregion -->
            <el-table-column
              :key="key"
              :label="$language.local(key)"
              :prop="key"
              align="center"
              v-else
            >
              <template slot-scope="scope">
                <div v-if="scope.row[key] == 1">
                  <span class="badge-dot-success"></span>
                  <template v-if="getStatusName(key)">
                    <span>{{ $language.local("已") }}</span>
                    <span>{{ getStatusName(key) }}</span>
                  </template>
                  <span v-else>{{ $language.local("Checked") }}</span>
                </div>
                <div v-else-if="scope.row[key] == 2">
                  <span class="badge-dot-danger">
                    {{
                    $language.local("不通过")
                    }}
                  </span>
                </div>
                <div v-else>
                  <!-- <i class="el-icon-circle-close" style="color: red"></i> -->
                  <span class="badge-dot warning"></span>
                  <template v-if="getStatusName(key)">
                    <span>{{ $language.local("待") }}</span>
                    <span>{{ getStatusName(key) }}</span>
                  </template>
                  <span v-else>{{ $language.local("待审核") }}</span>
                </div>
                <!-- <div v-if="'Indate' in scope.row">
                  <span>{{ converDate(scope.row.Indate) }}</span>
                </div>
                <div v-else-if="'atime' in scope.row">
                  <span>{{ converDate(scope.row.atime) }}</span>
                </div>-->
              </template>
            </el-table-column>
          </template>

          <!-- #endregion -->

          <!-- #region 状态zt -->
          <el-table-column
            :key="key"
            :label="$language.local(key)"
            :prop="key"
            align="center"
            v-else-if="key == 'zt'"
          >
            <template slot-scope="scope">
              <div v-if="scope.row[key] == 1">
                <!-- <span class="badge-dot success"></span> -->
                <span class="badge-dot success"></span>
                <!-- <i class="el-icon-circle-check" style="color: green"></i> -->
                <!-- <span v-if="scope.row.AuditInf">{{
                  $language.local(scope.row.AuditInf)
                }}</span>-->
                <span v-if="'zt_Name' in scope.row">{{ $language.local(scope.row.zt_Name) }}</span>
                <span v-else>{{ $language.local("正常") }}</span>
              </div>

              <div v-else>
                <!-- <i class="el-icon-circle-close" style="color: red"></i> -->
                <span class="badge-dot warning"></span>

                <span v-if="scope.row.AuditInf">
                  {{
                  $language.local(scope.row.AuditInf)
                  }}
                </span>
                <span v-else-if="'zt_Name' in scope.row">{{ $language.local(scope.row.zt_Name) }}</span>
                <span v-else>{{ $language.local("待审核") }}</span>
              </div>
              <!-- <div v-if="'Indate' in scope.row">
                <span>{{ converDate(scope.row.Indate) }}</span>
              </div>-->
            </template>
          </el-table-column>
          <!-- #endregion -->
          <!-- #region 状态is_lock -->
          <el-table-column
            :key="key"
            :label="$language.local('状态')"
            :prop="key"
            align="center"
            sortable
            v-else-if="key == 'is_lock'"
          >
            <template slot-scope="scope">
              <div v-if="scope.row[key] == 0">
                <!-- <i class="el-icon-circle-check" style="color: green"></i> -->
                <span class="badge-dot success"></span>

                <span>{{ $language.local("正常") }}</span>
              </div>
              <div v-else>
                <!-- <i class="el-icon-circle-close red"></i> -->
                <span class="badge-dot danger"></span>
                <span>{{ $language.local("禁用") }}</span>
              </div>
            </template>
          </el-table-column>
          <!-- #endregion -->
          <!-- #region 启用状态 -->
          <template v-else-if="key == 'isVisible'">
            <el-table-column
              :key="key"
              :label="$language.local(key)"
              :prop="key"
              align="center"
            >
              <template slot-scope="scope">
                <div v-if="scope.row[key] == 0">
                  <i
                    class="el-icon-circle-check"
                    style="color: green"
                  ></i>
                  启用
                  <!-- <span>{{ $language.local(scope.row.AuditInf) }}</span> -->
                </div>

                <div v-else>
                  <i
                    class="el-icon-circle-close"
                    style="color: red"
                  ></i>
                  停用
                  <!-- <span v-if="scope.row.AuditInf">{{
                  $language.local(scope.row.AuditInf)
                }}</span>
                  <span v-else>{{ $language.local("待审核") }}</span>-->
                </div>
              </template>
            </el-table-column>
          </template>
          <!-- #endregion -->
          <!-- #region 状态IsDefault -->
          <el-table-column
            :key="key"
            :label="$language.local(key)"
            :prop="key"
            align="center"
            sortable
            v-else-if="key == 'IsDefault'"
          >
            <template slot-scope="scope">
              <div v-if="scope.row[key] == 1">
                <!-- <i class="el-icon-circle-check" style="color: green"></i> -->
                <span class="badge-dot success"></span>
                <span>{{ $language.local("IsDefault") }}</span>
              </div>
            </template>
          </el-table-column>
          <!-- #endregion -->
          <!-- #region Error -->
          <el-table-column
            :key="key"
            :label="$language.local('Error')"
            :prop="key"
            align="center"
            v-else-if="key === 'Error'"
          >
            <template slot-scope="scope">
              <template v-if="scope.row[key] === ''">
                <span class="badge-dot success">成功</span>
              </template>
              <div v-else>
                <span class="badge-dot-error"></span>
                <span>{{ scope.row[key] }}</span>
              </div>
            </template>
          </el-table-column>
          <!-- #endregion -->

          <!-- #region 创建日期 -->
          <template v-else-if="key == 'Indate'"></template>
          <!-- #endregion -->
          <!-- #region 开始日期 -->
          <el-table-column
            :key="key"
            :label="$language.local('起止日期')"
            :prop="key"
            align="center"
            v-else-if="key === 'BeginDate'"
          >
            <template slot-scope="scope">
              <div>{{$language.local("Start")}}: {{ converDate(scope.row[key]) }}</div>
              <div
                v-if="'EndDate' in scope.row"
              >{{$language.local("Stop")}}: {{ converDate(scope.row.EndDate) }}</div>
            </template>
          </el-table-column>
          <!-- #endregion -->
          <!-- #region 结束日期 -->
          <template v-else-if="/end/i.test(key)"></template>
          <!-- #endregion -->
          <!-- #region 开始时间 -->
          <el-table-column
            :key="key"
            :label="$language.local('起止时间')"
            :prop="key"
            align="center"
            v-else-if="key === 'BegTime'"
          >
            <template slot-scope="scope">
              <div>{{$language.local("Start")}}: {{ converDate(scope.row[key]) }}</div>
              <div
                v-if="'EndTime' in scope.row"
              >{{$language.local("Stop")}}: {{ converDate(scope.row.EndTime) }}</div>
            </template>
          </el-table-column>
          <!-- #endregion -->

          <!-- #region 日期 -->

          <el-table-column
            :key="key"
            :label="$language.local(key)"
            :prop="key"
            align="center"
            v-else-if="
              key.toLowerCase().indexOf('date') !== -1 ||
              key.toLowerCase().indexOf('time') !== -1
            "
          >
            <template slot-scope="scope">
              <div
                v-html="scope.row[key]"
                v-if="key === 'taskDate'"
              ></div>
              <div v-else>
                <span>{{ converDate(scope.row[key]) }}</span>
              </div>
            </template>
          </el-table-column>
          <!-- #endregion -->

          <!-- #region 充值金额 -->
          <template v-else-if="key == 'RechargeAmount'">
            <el-table-column
              :key="key"
              :label="$language.local('RechargeAmount')"
              :prop="key"
              align="center"
            >
              <template slot-scope="scope">
                <el-popover
                  placement="top"
                  trigger="hover"
                  v-if="
                    Object.hasOwnProperty.call(scope.row, 'AccountAmount') &&
                    Object.hasOwnProperty.call(scope.row, 'RechargeRate')
                  "
                >
                  <p>
                    {{ $language.local("RechargeAmount") }}:
                    {{ scope.row.RechargeAmount }}
                  </p>
                  <p>
                    {{ $language.local("AccountAmount") }}:
                    {{ scope.row.AccountAmount }}
                  </p>
                  <p>
                    {{ $language.local("RechargeRate") }}:
                    {{ scope.row.RechargeRate }}%
                  </p>
                  <p v-if="'RechargeTime' in scope.row">
                    {{ $language.local("RechargeTime") }}:
                    {{ converDate(scope.row.RechargeTime) }}
                  </p>
                  <div
                    class="name-wrapper"
                    slot="reference"
                  >
                    <el-tag size="medium">
                      {{
                      scope.row.RechargeAmount
                      }}
                    </el-tag>
                  </div>
                </el-popover>
                <span v-else>{{ scope.row.RechargeAmount }}</span>
              </template>
            </el-table-column>
          </template>
          <!-- #endregion -->
          <!-- #region 结算金额 -->
          <template v-else-if="key == 'Amount'">
            <el-table-column
              :key="key"
              :label="$language.local('Amount')"
              :prop="key"
              align="center"
            >
              <template slot-scope="scope">
                {{ scope.row[key] }}
                <!-- <div v-if="'SettlementDate' in scope.row">
                  {{ converDate(scope.row.SettlementDate) }}
                </div>-->
              </template>
            </el-table-column>
          </template>
          <!-- #endregion -->
          <!-- #region 是否显示 -->
          <template v-else-if="key == 'isShow'">
            <el-table-column
              :key="key"
              :label="$language.local(key)"
              :prop="key"
              align="center"
            >
              <template slot-scope="scope">
                <div v-if="scope.row[key] == 1">
                  <i
                    class="el-icon-circle-check"
                    style="color: green"
                  ></i>
                  <!-- <span>{{ $language.local(scope.row.AuditInf) }}</span> -->
                </div>

                <div v-else>
                  <i
                    class="el-icon-circle-close"
                    style="color: red"
                  ></i>
                  <!-- <span v-if="scope.row.AuditInf">{{
                  $language.local(scope.row.AuditInf)
                }}</span>
                  <span v-else>{{ $language.local("待审核") }}</span>-->
                </div>
              </template>
            </el-table-column>
          </template>
          <!-- #endregion -->

          <!-- #region 认证通道 -->
          <template v-else-if="key == 'ChannelType'">
            <el-table-column
              :key="key"
              :label="$language.local(key)"
              :prop="key"
              align="center"
            >
              <template slot-scope="scope">
                <div v-if="scope.row[key] == 1">
                  阿里云
                  <!-- <span>{{ $language.local(scope.row.AuditInf) }}</span> -->
                </div>

                <div v-else>腾云完美签</div>
              </template>
            </el-table-column>
          </template>
          <!-- #endregion -->
          <!-- #region 认证通道 -->
          <template v-else-if="key == 'result'">
            <el-table-column
              :key="key"
              :label="$language.local(key)"
              :prop="key"
              align="center"
            >
              <template slot-scope="scope">
                {{ showResult(scope.row) }}
                <!-- <span>{{ $language.local(scope.row.AuditInf) }}</span> -->
              </template>
            </el-table-column>
          </template>
          <!-- #endregion -->
          <!-- #region 余额 -->
          <template v-else-if="key == 'AvailableBalance'">
            <el-table-column
              :key="key"
              :label="$language.local(key)"
              :prop="key"
              :sort-method="sortAvailableBalance"
              align="center"
              sortable
            ></el-table-column>
          </template>
          <!-- #endregion -->

          <!-- #region 银行 -->
          <template v-else-if="/BankCardNo/i.test(key)">
            <el-table-column
              :key="key"
              :label="$language.local(key)"
              :prop="key"
              align="center"
            >
              <template slot-scope="scope">
                <div v-if="'BankName' in scope.row">{{ scope.row["BankName"] }}</div>
                <div>{{ $common.projectPrivacy(scope.row[key]) }}</div>
              </template>
            </el-table-column>
          </template>
          <!-- #endregion -->

          <!-- #region ruleType -->
          <el-table-column
            :key="key"
            :label="$language.local(key)"
            :prop="key"
            align="center"
            show-overflow-tooltip
            v-else-if="/ruletype/i.test(key)"
          >
            <template slot-scope="scope">{{ $common.dictionary.get(key, scope.row[key]) }}</template>
          </el-table-column>
          <!-- #endregion -->
          <!-- #region Download -->
          <el-table-column
            :key="key"
            :label="$language.local(key)"
            :prop="key"
            align="center"
            v-else-if="/url/i.test(key)"
          >
            <template slot-scope="scope">
              <el-button
                @click="$common.download(scope.row[key])"
                icon="el-icon-download"
                type="text"
              >{{$language.local("Download")}}</el-button>
            </template>
          </el-table-column>
          <!-- #endregion -->
          <!-- #region  任务名字-->
          <el-table-column
            :key="key"
            :label="$language.local(key)"
            :prop="key"
            align="center"
            show-overflow-tooltip
            v-else-if="/projectName|SPName/i.test(key)"
          >
            <template slot-scope="scope">
              <div v-if="scope.row['BusinessNo']">{{scope.row["BusinessNo"]}}</div>
              {{ $common.dictionary.get(key, scope.row[key]) }}
            </template>
          </el-table-column>
          <!-- #endregion -->

          <!-- #region 其它居中 -->
          <el-table-column
            :key="key"
            :label="$language.local(key)"
            :prop="key"
            align="center"
            show-overflow-tooltip
            v-else
          >
            <template slot-scope="scope">{{ $common.dictionary.get(key, scope.row[key]) }}</template>
          </el-table-column>
          <!-- #endregion -->
        </template>

        <slot></slot>
        <slot name="operation">
          <el-table-column
            :label="$language.local('Operate')"
            align="center"
            width="200px"
          >
            <span
              class="operation-header"
              slot="header"
            >
              {{
              $language.local("Operate")
              }}
            </span>
            <template slot-scope="scope">
              <div class="row operation">
                <slot
                  :row="scope.row"
                  name="view"
                  v-if="user.roletype === 99 || api.entity === 'ServiceProject'"
                >
                  <el-button
                    @click="handleView(scope.row)"
                    type="text"
                  >{{ $language.local("View") }}</el-button>
                </slot>
                <slot
                  :row="scope.row"
                  name="appendButton"
                ></slot>

                <slot
                  :scope="scope"
                  name="operationButton"
                >
                  <slot
                    :row="scope.row"
                    name="edit"
                    v-if="hasRight('Edit')"
                  >
                    <el-button
                      @click="handleEdit(scope.row)"
                      size="mini"
                      type="text"
                    >{{ $language.local("Edit") }}</el-button>
                  </slot>
                  <slot
                    :row="scope.row"
                    name="check"
                    v-if="hasRight('Check') || hasRight('Audit')"
                  >
                    <el-button
                      @click="handleCheck(scope.row)"
                      size="mini"
                      type="text"
                    >{{ $language.local("Check") }}</el-button>
                    <!-- <slot name="checkButton" :row="scope.row"> </slot> -->
                  </slot>
                  <slot
                    :row="scope.row"
                    name="setrm"
                    v-if="hasRight('SetRM')"
                  ></slot>

                  <slot
                    :row="scope.row"
                    name="downfile"
                    v-if="hasRight('DownFile')"
                  ></slot>
                  <slot
                    :row="scope.row"
                    name="authsign"
                    v-if="hasRight('AuthSign')"
                  ></slot>

                  <slot
                    :scope="{ scope }"
                    name="ExportIn"
                    v-if="hasRight('ExportIn')"
                  ></slot>
                  <slot
                    :row="scope.row"
                    name="delete"
                    v-if="hasRight('Delete') && api"
                  >
                    <!-- <delete-row
                    :api="api.deleteById"
                    :row="scope.row"
                    ></delete-row>-->
                    <el-button
                      @click="handleDelete(scope.row)"
                      size="mini"
                      type="text"
                    >{{ $language.local("删除") }}</el-button>
                  </slot>
                </slot>
              </div>
            </template>
          </el-table-column>
        </slot>
      </el-table>
    </div>
    <!-- #endregion -->

    <!-- #region 分页-->
    <slot name="pagination">
      <div class="page-footer">
        <el-pagination
          :current-page="queryInfo.page"
          :page-size="queryInfo.pageSize"
          :page-sizes="[1, 5, 10, 15, 100, total]"
          :total="total"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
          layout="total, sizes, prev, pager, next, jumper"
        ></el-pagination>
        <el-button
          @click="exportFile"
          class="exportFile"
          size="mini"
        >
          <i class="el-icon-download"></i>
          {{ $language.local("导出当前页") }}
        </el-button>
      </div>
    </slot>

    <!-- #endregion -->
    <!-- #region 表格操作按钮中的查看按钮 -->
    <el-dialog
      :visible.sync="viewDialogVisible"
      append-to-body
      class="view-dialog"
      width="70%"
    >
      <div slot="title">{{ $language.local("查看") }}</div>
      <!-- <ul class="grid-flex align-right">
        <template v-for="(value, key) in rowData">
          <template
            v-if="/id|img|url|path|Esignature|password|status|type/i.test(key)"
          ></template>
          <li :key="key" class="row" v-else-if="rowData[key]">
            <div class="label text-align-left">
              <h1>{{ $language.local(key) }}：</h1>
            </div>
            <template v-if="key === 'SettlementModes'">
              <div>{{ settlementModes[rowData[key]] }}</div>
            </template>
            <template v-if="/date|time/i.test(key)">
              <div class="value">
                {{ new Date(rowData[key]).format("yyyy-MM-dd") }}
              </div>
            </template>
            <div class="value" v-else>
              <template v-if="rowData[key].length > 15">
                <el-tooltip :content="rowData[key]" placement="top">
                  <div class="wrap">{{ rowData[key] }}</div>
                </el-tooltip>
              </template>
              <div class="wrap" v-else>
                {{ rowData[key] }}
              </div>
            </div>
          </li>
        </template>

        <slot name="dialog-li"></slot>
      </ul>-->
      <display-table
        :model="rowData"
        class="display-table"
      ></display-table>

      <div
        class="view-footer"
        slot="footer"
      >
        <el-button
          @click="viewDialogVisible = false"
          class
          icon="el-icon-close"
          size="mini"
        >取消</el-button>
      </div>
    </el-dialog>
    <!-- #endregion -->

    <el-dialog
      :title="$language.local('修改')"
      :visible.sync="editDialogVisible"
    >
      <el-form
        :model="editForm"
        :rules="$rules"
        label-width="126px"
        ref="editFormRef"
        status-icon
      >
        <template v-for="(value, key) in addForm">
          <template
            v-if="
              key.toLowerCase().indexOf('date') === -1 &&
              key.toLowerCase().indexOf('time') === -1 &&
              key.toLowerCase().indexOf('id') === -1
            "
          >
            <el-form-item
              :key="key"
              :label="$language.local(key)"
              :prop="key"
            >
              <xy-input
                clearable
                v-model="editForm[key]"
              ></xy-input>
            </el-form-item>
          </template>
        </template>
      </el-form>
      <span
        class="dialog-footer"
        slot="footer"
      >
        <el-button @click="editDialogVisible = false">
          {{
          $language.local("取消")
          }}
        </el-button>
        <el-button
          @click="onEditSubmit('editFormRef')"
          type="primary"
        >
          {{
          $language.local("确定")
          }}
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  inject: ["reload", "toFixed2"],
  props: {
    list: Array,
    columns: {
      type: Object,
      require: true,
    },
    size: {
      type: String,
      default: "small",
    },
    multiple: {
      type: Boolean,
      default: false,
    },
    queryColumn: String,

    api: {
      type: Object,
    },
    param: Object,
    pathArgs: Object,
    addFormDTO: Object,
    height: [String, Number],
    TotalCount: Number,
    onView: Function,
    onEdit: Function,
    onDelete: Function,
    onCheck: Function,
  },
  data() {
    return {
      dataList: this.list,
      queryList: [],
      total: this.TotalCount,
      queryAttribute: "",
      searchInput: "",
      queryInfo: {
        keywords: "",
        pageSize: 5,
        page: 1,
      },
      addDialogVisible: false,
      editDialogVisible: false,
      uploadDialogVisible: false,
      deleteDialogVisible: false,
      viewDialogVisible: false,
      addForm: this.addFormDTO,
      tbAddFrom: {
        name: "用户名",
        password: "密码",
      },
      editForm: {},
      addFormRoles: [],
      user: this.$store.getters.user,
      rowData: {},
      settlementModes: {
        1: "按项目工作时间结算",
        2: "按项目工作成果结算",
        3: "按项目完工进度结算",
        4: "其它方式",
      },
      auth: {},
    };
  },
  watch: {
    /*
     * TotalCount(newValue) {
     *   this.total = newValue;
     * },
     */
    list(newValue){
      console.log(newValue);
      this.dataList = newValue;
    }
  },
  created() {
    console.log("权限列表:", this.$store.getters.rights);
    const menuName = this.$route.matched[1].path.slice(1);
    console.log("菜单:", menuName);
    this.auth = this.$store.getters.rights[menuName];
    if (!this.auth && this.api) {
      this.auth = this.$store.getters.rights[this.api.entity];
    }
    console.log("权限:", this.auth);
    console.log(this.api);
  },
  mounted() {
    this.queryInfo.page =
      parseInt(window.sessionStorage.getItem(this.$route.name + "pageIndex")) ||
      1;
    this.queryInfo.pageSize =
      parseInt(window.sessionStorage.getItem(this.$route.name + "pageSize")) ||
      this.queryInfo.pageSize;
    // console.log(document.getElementsByClassName("el-table")[0].offsetHeight);

    // this.addForm = { ...this.columns };
    if (this.list) {
      this.dataList = this.list;
      this.total = this.list.length;
      console.log(this.total);
    } else {
      this.getData(this.param);
    }
    // this.total = this.list.length;
  },

  computed: {
    tbPathArgs: function () {
      return { userId: this.user.userId, ...this.pathArgs };
    },
    queryKey() {
      if (this.queryColumn) {
        return this.queryColumn;
      } else {
        const keys = Object.keys(this.columns || this.list[0]);
        if (keys.length > 0) {

          return keys[0];
        }else{
          return "";
        }
      }
    },
    columnKeys() {
      return this.columns || this.list[0];
    },
  },
  methods: {
    async getData(param) {
      if (!this.api) {
        return;
      }
      let formData = this.addFormDTO || this.columns;
      window.sessionStorage.setItem(this.api.entity, JSON.stringify(formData));

      if (param) {
        this.queryInfo = { ...this.queryInfo, ...param };
      }
      let response = await this.$http.get(this.api.getList, this.queryInfo);
      console.dir(response);

      if (response.data.Code == 200) {
        this.dataList = response.data.Data;
        this.total = response.data.TotalCount || this.dataList.length;
      }
    },
    hasRight(action) {
      return action in this.auth;
    },
    handleEdit(item) {
      if (this.onEdit) {
        this.onEdit(item);
      } else {
        window.sessionStorage.setItem(
          this.api.entity + "Data",
          JSON.stringify(item)
        );
        this.$router.push({
          path: "/detail",
          query: {
            api: this.api.edit,
            id: item.id || item.Id || item.ID,
          },
        });
      }
    },
    handleCheck(item) {
      console.log(item);
      if (this.onCheck) {
        this.onCheck(item);
        return;
      }
      window.sessionStorage.setItem(
        this.api.entity + "Data",
        JSON.stringify(item)
      );
      this.$router.push({
        path: "/detail",
        query: {
          api: this.api.check,
          id: item.id || item.Id || item.ID,
        },
      });
    },
    async handleDelete(row) {
      let result = await this.$confirm(
        `${this.$language.local(
          "此操作将会删除该行数据，请谨慎操作，是否继续"
        )}？`,
        this.$language.local("提示"),
        {
          confirmButtonText: this.$language.local("确定"),
          cancelButtonText: this.$language.local("取消"),
          type: "warning",
        }
      ).catch((err) => err);

      if (result === "confirm") {
        if (this.onDelete) {
          this.onDelete(row);
        } else {
          let id = row["id"] || row["ID"] || row["Id"];
          await this.$http.delete(this.api.delete + id);
        }
        this.reload();
      } else {
        this.$message.info("已取消");
      }
    },
    async onSearch() {
      this.queryInfo.keywords = this.searchInput;
      let response = await this.$http.get(this.api.getList, this.queryInfo);
      console.log(response);
      this.dataList = response.data.Data;
      this.total = response.data.TotalCount;
    },
    queryAttributeChange(item) {
      /*
       * this.queryInfo.queryAttribute = item.replace(
       *   item[0],
       *   item[0].toUpperCase()
       * );
       */
      console.log(item);
    },
    async querySearch(queryString, cb) {
      const reg = new RegExp(
        "and|exec|execute|insert|select|delete|update|count|chr|mid|master|char|declare|sitename|net user|xp_cmdshell|or|create|drop|table|from|grant|use|group_concat|column_name|information_schema.columns|table_schema|union|where|select|delete|update|orderhaving|having|by|count|\\*|truncate|like",
        "i"
      );
      queryString = queryString.replace(reg, "");

      let results = [];
      if (queryString) {
        if(this.api)
        {
          this.queryInfo.keywords = queryString;
          let query = { ...this.queryInfo };
          query.pageSize = this.total;
          let response = await this.$http.get(this.api.getList, query);
          console.log(response);
          if (response.ok) {
            results = response.data.Data;
          }
        }
        else{
          results = this.dataList.filter(v=> v[this.queryKey].toLocaleLowerCase().indexOf(queryString.toLocaleLowerCase()) !== -1 );
        }

      }
      results.forEach((v) => {
        v.value = v[this.queryKey];
      });
      this.queryList = results;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (
          restaurant.name.toLowerCase().indexOf(queryString.toLowerCase()) === 0
        );
      };
    },
    converDate(dateStr) {
      if (dateStr) {
        let date = new Date(dateStr);
        return date == "Invalid Date" ? dateStr : date.format("yyyy-MM-dd");
      } else {
        return "";
      }
    },
    onClearProc() {
      this.queryInfo.keywords = null;
      if (this.list) {
        this.dataList = this.list;
      }else{
        this.getData();
      }
    },
    handleSelect(e) {
      console.log(e);
      this.dataList = [e];
    },
    itemStateChange() {},
    handleSizeChange(newPageSize) {
      this.queryInfo.pageSize = newPageSize;
      window.sessionStorage.setItem(this.$route.name + "pageSize", newPageSize);
      this.getData();
    },
    handleCurrentChange(newPageIndx) {
      this.queryInfo.page = newPageIndx;
      window.sessionStorage.setItem(
        this.$route.name + "pageIndex",
        newPageIndx
      );
      this.getData();
    },
    uploadFile() {
      this.uploadDialogVisible = true;
    },
    downloadFile(e) {
      console.log(e);
    },
    exportFile() {
      const jsondata = this.dataList;
      let title = this.columns;
      const titleKeys = Object.keys(title);
      // 列标题，逗号隔开，每一个逗号就是隔开一个单元格
      let str = "";
      for (let i = 0; i < titleKeys.length; i++) {
        str += this.$language.local(titleKeys[i]);
        if (i + 1 !== titleKeys.length) {
          str += ",";
        } else {
          str += "\n";
        }
      }
      // 增加\t为了不让表格显示科学计数法或者其他格式
      for (let i = 0; i < jsondata.length; i++) {
        for (const key in title) {
          str += `${jsondata[i][key] + "\t"},`;
        }
        str += "\n";
      }
      // encodeURIComponent解决中文乱码
      const uri =
        "data:text/csv;charset=utf-8,\ufeff" + encodeURIComponent(str);
      // 通过创建a标签实现
      const link = document.createElement("a");
      link.href = uri;
      // 对下载的文件命名
      link.download = `${this.$route.name}数据表.csv`;
      link.click();
    },
    addItem() {
      this.$router.push({
        path: "/detail",
        query: {
          api: this.api.create,
        },
      });
    },
    add(formName) {
      this.$refs[formName].validate(async (valided) => {
        if (!valided) {
          return;
        }
        console.log(this.addForm);
        console.log(this.tbPathArgs);
        console.log(this.api.postCreate);
        try {
          let response = await this.$http.post(
            this.api.postCreate,
            this.addForm
          );
          console.log(response);
          if (response.ok) {
            this.$message.success("添加成功");
            this.dataList = [response.data.Data];
          } else {
            this.$message.error("添加失败");
          }
        } catch (error) {
          console.error(error);
          this.$message.error("添加失败");
          return;
        } finally {
          this.addDialogVisible = false;
        }
      });
    },
    onEditSubmit(formName) {
      this.$refs[formName].validate(async (valided) => {
        if (!valided) {
          return;
        }

        let response = await this.$http.post(this.api.postEdit, this.editForm);
        console.log(response);
        this.dataList = [response.data.Data];
        this.addDialogVisible = false;
      });
    },

    handleSelectionChange(val) {
      this.$emit("selection-change", val);
    },
    getHeight() {
      return document.body.scrollHeight * this.height;
    },
    getStatusName(key) {
      let name = this.$language.local(key);
      name = name.replace(/状态|status/i, "");
      return name;
    },
    showResult(row) {
      if (!row.result) {
        return "";
      }
      let result = JSON.parse(row.result);
      console.log(result);
      if (row.ChannelType === 1) {
        return result.data.desc;
      } else if (row.ChannelType === 2) {
        return result.errMsg || result.content.ResponseMessage;
      }
    },
    sortAvailableBalance(a, b) {
      const c = Number(a.AvailableBalance);
      const d = Number(b.AvailableBalance);
      return c - d;
    },
    onInput(e) {
      const reg = new RegExp(
        "and|exec|execute|insert|select|delete|update|count|chr|mid|master|char|declare|sitename|net user|xp_cmdshell|or|create|drop|table|from|grant|use|group_concat|column_name|information_schema.columns|table_schema|union|where|select|delete|update|orderhaving|having|by|count|\\*|truncate|like",
        "i"
      );
      this.searchInput = e.replace(reg, "");
    },
    handleView(row) {
      console.log(row);

      if (this.onView) {
        delete row.id;
        delete row.type;
        delete row.parentId;
        delete row.PreSid;
        delete row.PreRate;
        delete row.contractTplId;
        delete row.TSKSettlementTypeId;
        delete row.DataAreaId;
        delete row.IsMana;
        delete row.customerManagerId;
        delete row.originalcompanyId;
        delete row.TID;
        delete row.Id;
        delete row.ServiceId;
        delete row.originalUserId;
        delete row.CurStatus;
        delete row.bms;
        delete row.FileAttId;
        delete row.EMPID;
        delete row.ServiceEsignature;
        delete row.userId;
        delete row.AccountrechargeId;
        delete row.adduser;
        delete row.checkuser;
        delete row.OpenRA;
        delete row.userType;
        delete row.TID;
        delete row.AMID;
        this.onView(row);
      } else {
        // 移除对象中的DataAreaId字段
        delete row.id;
        delete row.ServiceProviderID;
        delete row.ServiceBankId;
        delete row.refundLockStatus;
        delete row.OtherRate;
        delete row.unioninvoice;
        delete row.ServiceProviderId;
        delete row.InvoiceTypeId;
        delete row.TBID;
        delete row.InvoicesubjectId;
        delete row.taskId;
        delete row.tsksids;
        delete row.type;
        delete row.parentId;
        delete row.ParentId;
        delete row.PreSid;
        delete row.PreRate;
        delete row.contractTplId;
        delete row.TSKSettlementTypeId;
        delete row.DataAreaId;
        delete row.IsMana;
        delete row.customerManagerId;
        delete row.originalcompanyId;
        delete row.TID;
        delete row.Id;
        delete row.ServiceId;
        delete row.originalUserId;
        delete row.CurStatus;
        delete row.bms;
        delete row.FileAttId;
        delete row.EMPID;
        delete row.ServiceEsignature;
        delete row.userId;
        delete row.AccountrechargeId;
        delete row.adduser;
        delete row.checkuser;
        delete row.OpenRA;
        delete row.userType;
        delete row.TID;
        delete row.AMID;
        this.rowData = row;
        this.viewDialogVisible = true;
      }
    },
    projectPrivacy(phone) {
      let header = phone.slice(0, 3);
      let footer = phone.slice(-4);
      let projectPhone = header + "****" + footer;
      return projectPhone;
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  // max-height: 100%;
  display: flex;
  flex-direction: column;
  .table-header {
    //padding-bottom: 15px;
    padding-top: 4px;
    .add-item {
      display: flex;
      justify-content: flex-start;
    }
    .table-search {
      margin-bottom: 18px;
    }
  }
  .xy-table {
    //flex-basis: 100%;
    flex: 1;
    //min-height: 200px;
  }
  .el-table {
    margin-top: 0;
    border-bottom: none !important;
    //height: 100%;
    min-height: 81px;
    // flex: 1;
    &::before {
      height: 0;
    }
    i {
      margin-right: 2px;
    }
    .operation-header {
      padding-left: 0.5rem;
    }
    .operation {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
    }
    .el-tooltip {
      margin-left: 0;
    }
  }

  .el-form {
    padding-right: 3rem;
  }
  .el-dialog {
    display: flex;
    justify-content: center;
  }
  .el-select {
    width: 100%;
  }
  .sex {
    widows: 100%;
    display: flex;
    justify-content: space-between;
  }
  .el-autocomplete {
    width: 100%;
    .el-select {
      width: 120px;
    }

    .input-with-select .xy-input-group__prepend {
      background-color: #fff;
    }
  }
  .el-pagination {
    margin-top: 15px;
  }
  .page-footer {
    background-color: white;
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem 1rem 1rem;
    .exportFile {
      margin-top: 15px;
    }
  }
  .el-dropdown-link {
    cursor: pointer;
    color: #409eff;
    font-size: 12px;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
}
</style>
